<template>
    <div class="property">
        <div style="color: #606266;">
            <el-form-item label="节点ID" class="formitem">
                {{props.node?.data.id}}
            </el-form-item>
        </div>
        <el-form label-width="auto" size="small">
            <el-collapse v-model="activeGroupIds" v-for="group in properties" :key="group">
                <el-collapse-item :title="group.groupName" :name="group.groupId">
                    <el-form-item :label="item.name" v-for="item in group.items" :key="item.key" class="formitem">
                        <template #label="{ }">
                            <div style="display: flex; flex-direction: row; align-items: center;">
                                <div>{{item.name}}</div>
                                <div v-if="Tips[item.key] || item.tips">
                                    <!-- 提示信息 -->
                                    <el-popover
                                        :width="300"
                                        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
                                        >
                                        <template #reference>
                                            <div style="width: 20px; height: 20px; fill: gray;">
                                                <svg t="1672303573625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2674" ><path d="M509.92 795.84c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z m0 48C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m-2.448-400.704h16a16 16 0 0 1 16 16v201.728a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V459.136a16 16 0 0 1 16-16z m0-100.176h16a16 16 0 0 1 16 16v23.648a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-23.648a16 16 0 0 1 16-16z" p-id="2675"></path></svg>
                                            </div>
                                        </template>
                                        <template #default>
                                            <div
                                            class="demo-rich-conent"
                                            style="display: flex; gap: 16px; flex-direction: column"
                                            >
                                            {{item.tips || Tips[item.key]}}
                                            </div>
                                        </template>
                                    </el-popover>
                                </div>
                            </div>
                        </template>
                        <!-- <el-switch v-model="form.css[group.groupId][item.key]" @change="onChange" v-if="item.valType == 'Switch'"/> -->
                        <el-input v-model="item.val" v-if="!item.valType || item.valType == 'String'"/>
                        <!-- <el-select v-model="form.css[group.groupId][item.key]" class="m-2" placeholder="Select" size="small" @change="onChange" v-if="item.valType == 'Select'">
                            <el-option
                            v-for="subitem in item.options"
                            :key="subitem.key"
                            :label="subitem.key"
                            :value="subitem.val"
                            />
                        </el-select> -->
                        <div v-if="!item.valType || item.valType == 'json' || item.valType == 'groovy'" style="width: 20px; height:20px; color:darkorange; fill:darkorange; cursor: pointer;" @click="updateJSONItem(item);">
                            <svg t="1672298953380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2424"><path d="M213.333333 128h85.333334v85.333333H213.333333v213.333334a85.333333 85.333333 0 0 1-85.333333 85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333v213.333334h85.333334v85.333333H213.333333c-45.653333-11.52-85.333333-38.4-85.333333-85.333333v-170.666667a85.333333 85.333333 0 0 0-85.333333-85.333333H0v-85.333334h42.666667a85.333333 85.333333 0 0 0 85.333333-85.333333V213.333333a85.333333 85.333333 0 0 1 85.333333-85.333333m597.333334 0a85.333333 85.333333 0 0 1 85.333333 85.333333v170.666667a85.333333 85.333333 0 0 0 85.333333 85.333333h42.666667v85.333334h-42.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v170.666667a85.333333 85.333333 0 0 1-85.333333 85.333333h-85.333334v-85.333333h85.333334v-213.333334a85.333333 85.333333 0 0 1 85.333333-85.333333 85.333333 85.333333 0 0 1-85.333333-85.333333V213.333333h-85.333334V128h85.333334m-298.666667 512a42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666666 42.666667 42.666667 0 0 1-42.666667-42.666666 42.666667 42.666667 0 0 1 42.666667-42.666667m-170.666667 0a42.666667 42.666667 0 0 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667 42.666666 42.666667 42.666667 0 0 1-42.666666-42.666666 42.666667 42.666667 0 0 1 42.666666-42.666667m341.333334 0a42.666667 42.666667 0 0 1 42.666666 42.666667 42.666667 42.666667 0 0 1-42.666666 42.666666 42.666667 42.666667 0 0 1-42.666667-42.666666 42.666667 42.666667 0 0 1 42.666667-42.666667z" p-id="2425"></path></svg>
                        </div>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>
        </el-form>
        <edit-code-dialog-vue v-if="showEditCodeDialog" v-model="showEditCodeDialog" :type="selectedItem.valType" :code="getCode(selectedItem)" @update:code="onUpdateCode"></edit-code-dialog-vue>

        <div class="oeprations">
            <el-button type="primary" @click="onSave">确认</el-button>
            <el-button @click="onCancel">取消</el-button>
            <el-button @click="onDelNode" type="danger">删除</el-button>

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, reactive, defineProps } from 'vue'
import { Node } from "@antv/x6";
import _ from 'lodash';
import {EventBus} from '../../../Utils/EventBus'
import type {PropType} from 'vue'
import EditCodeDialogVue from '../../../CodeEditor/EditCodeDialog.vue';
import Tips from '../Common/Tips'

const showEditCodeDialog = ref(false);
const activeGroupIds = ref(['common', 'params'])
const props = defineProps({
  node: { type:Node as PropType<Node|null>, required: true }
})

console.log('[PropertyPanel] node data', props.node!.data);

// 考虑到用户可以取消修改， 所以，copy一份数据，用户点击确认时，重新赋值。
const properties = reactive(_.cloneDeep(props.node!.data.properties));

let selectedItem:any;
const updateJSONItem = (item:any) =>{
    showEditCodeDialog.value = true;
    selectedItem = item;
}

const onUpdateCode = (code:string)=>{
    if(selectedItem.valType == 'json') {
        selectedItem.val = JSON.parse(code);
    }else{
        selectedItem.val = code;
    }
}

const getCode = (item:any) => {
    if(item.valType == 'json') {
        return JSON.stringify(item.val, null, 2);
    }else{
        return item.val;
    }
}

const onSave = () => {
    console.log("[PanelManager] onSave before", props.node!.data.properties);
    props.node!.data.properties = properties;
    console.log("[PanelManager] onSave after", props.node!.data.properties);
    EventBus.emit('closeDrawer');

    let comonGroup = properties.filter((item:any)=>item.groupId == 'common');
    if(comonGroup && comonGroup.length>0){
        let nameObj = comonGroup[0].items.filter((item:any)=>item.key == 'name');
        if(nameObj && nameObj.length>0){
            let val = nameObj[0]['val'];
            if(val.length>0) {
                props.node!.attr("text/text", val);
            }
        }
    }
}

// 取消保存
const onCancel = () =>{
    EventBus.emit('closeDrawer');
}

// 删除节点
const onDelNode = (e:any) => {
    if(confirm("确定要删除吗?")){
        EventBus.emit('removeNode', props.node);
    }
}

</script>
<style scoped>
.property{
    padding-right: 5px;
    padding-left: 5px;
}

.oeprations {
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0px;
    padding: 10px;
}
.formitem {
    padding-right: 8px;
}
</style>
